<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Easy-ICON - A Easy to Use Web Font ICON lib</title>
    <meta name="keywords" content="font icon lib,js lib,web font">
    <meta name="description" content="Easy-ICON - A Easy to Use Web Font ICON lib">
    <link rel="stylesheet" href="./dist/easy-icon-all.css">
    <link rel="stylesheet" href="./assets/index.css">
    <link rel="stylesheet" href="./assets/navi.css">
    <link rel="stylesheet" href="./assets/doc.css">
    <script src="./assets/index.js"></script>
    <script src="./assets/navi.js"></script>
</head>
<body>
    <div id='navi'>
        <div id='logo'>
            <a class='link-item' href='https://github.com/theajack/easy-icon' target="blank"><img src="./assets/images/logo.png" alt=""></a>
        </div>
        <div class='navi-w'>
            <span class='navi-item active' navi-target='iconShow'>Icon</span>
            <span class='navi-item' navi-target='useBlock'>Use</span>
            <span class='navi-item' navi-target='spinBlock'>Spin</span>
            <span class='navi-item' navi-target='sizeBlock'>Size</span>
        </div>
        <div class='link-w'>
            <a class='link-item' href='https://theajack.gitee.io/easy-icon/index_cn.html' target="blank">中文</a>
            <a class='link-item' href='https://github.com/theajack/easy-icon' target="blank"><i class="ei-github"></i></a>
        </div>
    </div>
    <div id="iconsExample" class="text">
        <div id="iconShow" class="t-center">
            <span id='icons'>
                <i class="ei-resize"></i>
                <i class="ei-resize icon-middle"></i>
                <i class="ei-resize icon-large"></i>
                <i class="ei-resize icon-slarge"></i>
            </span>
            <div class='input-w'>
                <input type="text" id='fullHtmlInput' readonly="" class="ei-input">
                <button class="ei-btn code-copy" title="Copy" onclick="copyInputValue('fullHtmlInput')"><i
                        class="ei-copy"></i></button>
            </div>
            <div class='input-w'>
                <input type="text" id='searchInput' class="ei-input" placeholder="Search icon.">
                <button class="ei-btn code-copy" title="Switch Mode" onclick="toggleMode(this)"><i class="ei-th"></i></button>
            </div>
        </div>
        <div id='no-icon'>Sorry! No results found.</div>
        <ul class="clearfix" id="iconList">
            <!-- xxx -->
        </ul>
    </div>
    <div id="no-icon" style="display: block;">Easy-ICON is powered by Font-Awesome, thanks a lot!</div>
    <div id='useBlock'>
        <div class="doc-title">How To Use?</div>
        <div class='doc-title-s'>1.Install</div>
        <div class='doc-text'>a.Use css file reference:(Recommended to download to local and then reference local files)</div>
        <div class='doc-text'>Easy-icon is divided into five modules, which can be referenced independently</div>
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.css"></pre> 
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.css"></pre> 
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.css"></pre> 
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.css"></pre> 
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.css"></pre> 
        <div class='doc-text'>Or use a collection version</div>
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css"></pre> 
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.min.css"></pre> 
        <div class='doc-text'>b.Install using npm:</div>
        <pre class='demo-code'>npm i easy-icon</pre>
        <div class='doc-text'>You only need to import once:</div>
        <div class='doc-text'>Same as css file reference, can be referenced independently by module, without using all</div>
        <pre class='demo-code'>import 'easy-icon'</pre>
        <pre class='demo-code'>import 'easy-icon/easy-icon-a.js'</pre>
        <pre class='demo-code'>import 'easy-icon/easy-icon-f.js'</pre>
        <pre class='demo-code'>import 'easy-icon/easy-icon-t.js'</pre>
        <pre class='demo-code'>import 'easy-icon/easy-icon-l.js'</pre>
        <div class='doc-text'>Or use a collection version</div>
        <pre class='demo-code'>import 'easy-icon/easy-icon-all.js'</pre>
        <div class='doc-title-s'>2.Useage</div>
        <div class='doc-text'>It's very easy to use, you just need to insert the tag anywhere:</div>
        <pre class='demo-code'>&lt;i class="ei-smile">&lt;/i></pre>
        <div class='doc-text'>Then you will see a lovely icon like this: <i class="ei-smile"></i></div>
        <div class='doc-text'>It should be noted that the prefixes corresponding to the five modules are different, respectively</div>
        <ul>
            <li>easy-icon: ei-</li>
            <li>easy-icon-a: ea-</li>
            <li>easy-icon-f: ef-</li>
            <li>easy-icon-t: et-</li>
            <li>easy-icon-l: el-</li>
        </ul>
    </div>
    <div id='spinBlock'>
        <div class="doc-title">Spin the icon!</div>
        <div class='doc-text'>You can add the <span class="red">ei-spin</span> class to spin the icon:</div>
        <pre class='demo-code'>&lt;i class="ei-spinner-snake ei-spin">&lt;/i></pre>
        <div class='doc-text'>The effect is like this: <i class="ei-spinner-snake ei-spin"></i></div>
        <div class='doc-text'>The ei-spin class behaves consistently for the five modules</div>
    </div>
    <div id='sizeBlock'>
        <div class="doc-title">Choose size</div>
        <div class='doc-text'>
            Easy-icon comes in eight sizes to choose from, from small to large:
            <span class="red">xs</span>,<span class="red">s</span>,<span class="red">l</span>,<span class="red">xl</span>,<span class="red">2x</span>,<span class="red">3x</span>,<span class="red">4x</span>,<span class="red">5x</span>
        </div>
<pre class='demo-code'>&lt;i class="ei-smile ei-xs">&lt;/i>
&lt;i class="ei-smile ei-s">&lt;/i>
&lt;i class="ei-smile ei-l">&lt;/i>
&lt;i class="ei-smile ei-xl">&lt;/i>
&lt;i class="ei-smile ei-2x">&lt;/i>
&lt;i class="ei-smile ei-3x">&lt;/i>
&lt;i class="ei-smile ei-4x">&lt;/i>
&lt;i class="ei-smile ei-5x">&lt;/i>
</pre>
        <div class='doc-text'>The effect is like this: <i class="ei-smile ei-xs"></i><i class="ei-smile ei-s"></i><i class="ei-smile ei-l"></i><i class="ei-smile ei-xl"></i><i class="ei-smile ei-2x"></i><i class="ei-smile ei-3x"></i><i class="ei-smile ei-4x"></i><i class="ei-smile ei-5x"></i></div>
        <div class='doc-text'>Of course, you can use css to customize any style.</div>
        <div class='doc-text'>The size class performs the same for the five modules</div>
    </div>
    <div id="footer" class="bg-black text-white part">
        <div id="footerLink">
            <a href='https://github.com/theajack' target="blank"><span class="link">GitHub</span></a>
            <span class="split-icon">|</span>
            <a href='http://weibo.com/p/1005055304330572/home?from=page_100505&amp;mod=TAB&amp;is_all=1' target="blank"><span class="link">Sina Micro-blog</span></a>
            <span class="split-icon">|</span>

            Email:theajack@qq.com
            <span class="split-icon d-hide">|</span>
            <a href='https://www.theajack.com' target="blank"><span class="link d-hide">theajack.com</span></a>
        </div>
        <div id="copyright">
            &copy; <span id="_year">2019</span> TheaJack All rights
            reserved
        </div>
    </div>
    <div id='toastEle'></div>
    <script src="./assets/buildDom.js"></script>
</body>

</html>